<template>
    <div>
        <a-modal
                :visible="errorCodeVisible"
                width="40%"
                @cancel="confirmFunc"
                :maskClosable="false"
                :bodyStyle="{paddingLeft: 0, paddingRight: 0}"
                :zIndex="3000"
        >
            <template slot="title">
                <icon-error></icon-error>  {{$t('menuItem.errorMessage')}}
            </template>
            <a-form-model :model="errorCodeForm" :labelCol="{span:6}" :wrapperCol="{span: 16}">
<!--                <a-row>-->
<!--                    <a-col :span="23">-->
<!--                        <a-form-model-item label="交易名">-->
<!--                            <a-input v-model="errorCodeForm.transactionNo" readOnly></a-input>-->
<!--                        </a-form-model-item>-->
<!--                    </a-col>-->
<!--                </a-row>-->
                <a-row>
                    <a-col :span="23">
                        <a-form-model-item :label="$t('menuItem.errorCode')">
                            <a-input v-model="errorCodeForm.errorCode" readOnly></a-input>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row >
                    <a-col :span="23">
                        <a-form-model-item :label="$t('menuItem.errorMessage')">
                            <a-textarea v-model="errorCodeForm.systemMessage" :rows="rows" readOnly></a-textarea>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="1">
                        <a-tooltip title="$t('menuItem.detailMessage')">
                            <icon-detail v-if="errorCodeForm.message" @click.native="expandedMessage" style="cursor: pointer"></icon-detail>
                        </a-tooltip>
                    </a-col>
                </a-row>
<!--                <a-row>
                    <a-col :span="23">
                        <a-form-model-item label="建议操作">
                            <a-textarea v-model="errorCodeForm.action" :rows="rows"></a-textarea>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="23">
                        <a-form-model-item label="详细操作">
                            <a-textarea v-model="errorCodeForm.actionDetail" :rows="rows"></a-textarea>
                        </a-form-model-item>
                    </a-col>
                </a-row>-->
            </a-form-model>
            <template slot="footer">
                <a-space>
<!--                    <a-button type="primary" @click="updateErrorAction" :loading="updateButtonLoading">更新</a-button>-->
                    <a-button type="primary" @click="confirmFunc">关闭</a-button>
                </a-space>
            </template>
        </a-modal>
    </div>

</template>

<script>
    import {mapMutations, mapState, mapActions} from "vuex";
    import IconExpand from "./icon/IconExpand";
    import {Modal} from 'ant-design-vue'
    import IconError from "./icon/IconError";
    import IconDetail from "./icon/IconDetail";

    export default {
        name: "ErrorCode",
        components: {IconDetail, IconError},
        data() {
            return {
                rows:3,
                showExpand: false,
                expanded: false,
                systemMessageVisible: false
            }
        },
        computed: {
            ...mapState("ErrorCode", ['errorCodeForm','errorCodeVisible','updateButtonLoading'])
        },
        methods: {
            ...mapMutations("ErrorCode", ['setErrorCodeVisible','clearErrorForm']),
            ...mapActions("ErrorCode",['queryErrorAction','updateFunc']),
            confirmFunc(){
                this.setErrorCodeVisible(false)
                this.clearErrorForm()
            },
            expandedMessage(){
                Modal.error({
                    closable:true,
                    class:'exceptionContent',
                    width: '60%',
                    // title: this.errorCodeForm.transactionNo + '-' + this.errorCodeForm.errorCode,
                    title: this.errorCodeForm.errorCode,
                    content: this.errorCodeForm.message,
                    zIndex:3001
                })
            },
            updateErrorAction(){
                this.updateFunc(this.errorCodeForm)
            }
        },
        // watch: {
        //     'errorCodeForm.errorCode'(val){
        //         if(val){
        //             this.queryErrorAction(val)
        //         }
        //     }
        // }
    }
</script>

<style scoped>

</style>
